<template>
<div ref="home" id="home">
    <NavBar>
      <template v-slot:default>图书兄弟</template>
    </NavBar>
  <div class="wrapper">
    <div class="content">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in banner" :key="index">
          <img v-if="banner.length>0"  v-lazy="item.img_url" class="img">
        </van-swipe-item>
      </van-swipe>
      <Recommend :recommends="recommends"></Recommend>
      <TabControl :titles="['畅销','新书','精选']" @tabClick="tabClick"/>
      <goods-list :goodsList="showGoods"/>
    </div>
  </div>
  <back-top @bTop="bTop"/>
</div>
</template>

<script>
import {onMounted,ref,reactive,computed,getCurrentInstance} from "vue";
import Recommend from '@/views/home/Recommend/index'
import TabControl from '@/components/content/tabControl/index'
import goodsList from '@/components/content/goods/index'
import backTop from '@/components/common/backTop/index'

export default {
  name: "home",
  components:{
    Recommend,
    TabControl,
    goodsList,
    backTop
  },
  setup(){
    const home=ref(null)
    let bscroll=reactive({})
    const tmId=ref(0)
    const banner=ref([])
    const recommends=ref([])
    const types=['sales','new','recommend']
    const currentType=ref('sales')
    const goods=reactive({
      sales:{page:0,list:[]},
      new:{page:0,list:[]},
      recommend:{page:0,list:[]}
    })
    const showGoods=computed(()=>goods[currentType.value].list)
    onMounted(async ()=>{
      // bscroll=new baseScroll(document.querySelector('.wrapper'),{
      //   probeType:true
      // })
    const {proxy}=getCurrentInstance()//vue3中通过proxy获取原型属性
   await proxy.$API.home.getHomeAllData().then(res=>{
     console.log(res)
     banner.value=res.slides
     recommends.value=res.goods.data
     }).catch(err=>{
     console.log(err)
     })
      await proxy.$API.home.getHomeGoods('sales').then(res1=>{
        goods.sales.list=res1.goods.data//
        console.log(res1)
      })
      await proxy.$API.home.getHomeGoods('recommend').then(res2=>{
        goods.new.list=res2.goods.data
        console.log(res2)
      })
      await proxy.$API.home.getHomeGoods('new').then(res3=>{
        goods.recommend.list=res3.goods.data
        console.log(res3)
      })
    })
    function tabClick(index){
      tmId.value=index
      currentType.value=types[index]
      console.log(index)
    }
    function bTop(){
    document.documentElement.scrollTop=0
      console.log(top)
    }
    return{
      banner,
      recommends,
      tmId,
      tabClick,
      goods,
      types,
      showGoods,
      currentType,
      bTop,
      bscroll,
      home
    }
  }
}
</script>

<style scoped>
.img{
  height:200px;
  width: 100%;
  text-align: center;
}
.van-swipe{
  margin-top: 45px;
height:100%;
  width: 100% !important;
}
#home{
  width: 100%;
}
/*#home{*/
/*  position: relative;*/
/*  height: 100vh;*/
/*}*/
/*.wrapper{*/
/*  position: absolute;*/
/*  top:45px;*/
/*  left:0;*/
/*  right: 0;*/
/*  overflow: hidden;*/
/*}*/
</style>
